.container {
  width: 100%;
  height: 100%;
  overflow: auto;
  /* y Y轴捕捉位置*/
  /* 超过距离则滚动到下个容器 */
  scroll-snap-type: y mandatory;
}

@mixin Page () {
  width: 100%;
  height: 100%;
  padding: 150px;
  scroll-snap-align: start;
}

.textContainer {
  width: 300px;
}

.textContent {
  line-height: 30px;
  padding: 5px 0;
  cursor:pointer;
  font-size: 20px;
  background: linear-gradient(to right, red, green) no-repeat right bottom;
  background-size: 0 4px;
  transition: background-size 1100ms;
}

.textContent:hover {
  background-size: 100% 4px;
  background-position-x: left;
}


.pageOne {
  @include Page();
  background-color: lightblue;
}
.pageThree {
  @include Page();
  background-color: lightgreen;
}
.pageTwo {
  @include Page();
  background-color: lightpink;
}

.image {
  -webkit-box-reflect: below 2px linear-gradient(transparent, white);
}